<template>
	<view class="list" :class="introType==2?'brandSaleList':introType==3?'brandInvalidList':''">
		<view class="item" v-for="(item, index) in list" @tap="toDetails(item.id)">
			<image class="radio" :src="imageUrl(item.radio)" @tap.stop.prevent="choose('single', item.radio, indexs, index)"></image>
			<view class="item_right">
				<view v-if="introType==2" class="brandSaleList_item_title">距离开售仅剩 {{item.timers}}</view>
				<view class="row">
					<image class="avater" :src="item.thumPic"></image>
					<view class="item_content">
						<view class="xjs-line-one name"><text v-if="item.openStatus3">{{item.openStatus3}}</text>{{item.name}}</view>
						<view class="specifications" @tap.stop.prevent="changeSpecifications(item)">
							<view v-if="item.skuProperties">{{skuProperties(item.skuProperties)}}</view>
							<view v-else>默认规格</view>
							<uni-icons type="right" size="13" :color="'#7C807F'"></uni-icons>
						</view>
						<view class="priceAndnum" :class="introType!=3?'introType3':''">
							<view class="price">¥{{Number(item.price)}}</view>
							<view class="priceAndnum_num" :style="{ opacity: 1 }" v-if="introType!=3">
								<view @tap.stop.prevent="amount(1,item)">-</view>
								<view @tap.stop.prevent="amount(3,item)">{{ item.amount }}</view>
								<view @tap.stop.prevent="amount(2,item)">+</view>
							</view>
							<view class="tips" v-if="item.invalidIntro">{{item.invalidIntro}}</view>
						</view>
						<view v-if="item.isPredict" class="yushou"> {{item.isPredict}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { useCartStoreToRefs,useCartStore } from "@/store/useCartStore";
//introType  商品类型  1  可购买  2  即将开售  3  失效商品
const props = defineProps(['list','introType','indexs'])


const emit = defineEmits(['amount','choose','changeSpecifications']);

//加减
const amount = (num:number,item:any)=>{
	emit('amount',item,num)
}
//选择
const choose = (type:string, status:Boolean, i:number, j:number)=>{
	emit('choose',type,status,i,j)
}

//处理规格
const skuProperties = (str:string)=>{
	const strs = JSON.parse(str)
	let text = ''
	strs.forEach(item=>{
		text+=item.value
	})
	return text
}
const toDetails = (id:string)=>{
	uni.navigateTo({
		url:'/pages/shopping/productDetails/index?goodsId=' + id
	})
}
const changeSpecifications = (item:any)=>{
	emit('changeSpecifications',item)
}
const imageUrl = (radio:Boolean) => {
	let num = '60';
	num = props.introType==1?radio?'13':'12':'60'
	return `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-${num}.png`;
}
</script>

<style lang="scss" scoped>
.radio{
	width: 40rpx;
	height: 40rpx;
	margin-right: 24rpx;
}
.priceAndnum_num {
	border: 1px solid #E4E6E6;
	border-radius: 6rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	height: 72rpx;
	line-height: 72rpx;
	border-radius: 72rpx;
	margin-left: 15rpx;
	>view {
		width: 72rpx;
		height: 72rpx;
		font-size: 40rpx;
	}
	>view:nth-of-type(2) {
		width: 88rpx;
		height: 72rpx;
		border-left: 1px solid #E4E6E6;
		border-right: 1px solid #E4E6E6;
		font-size: 32rpx;
	}
}
.product-count {
	font-size: 28rpx;
	color: #7c807f;
}
.list{
	padding: 0 24rpx;
	box-sizing: border-box;
}
.brandSaleList_item_title{
	width: 100%;
	height: 56rpx;
	font-size: 24rpx;
	color: #FF6084;
	line-height: 56rpx;
	padding-left: 16rpx;
	box-sizing: border-box;
	background: #FDE8EC;
	border-radius: 12rpx;
	margin-bottom: 16rpx;
}
.item{
	padding: 40rpx 0;
	box-sizing: border-box;
	border-top: 2rpx solid #E4E6E6;
	@include flex(center,space-between);
	.yushou{
		font-size: 24rpx;
		color: #6363FF;
		margin-top: 24rpx;
		line-height: 40rpx;
	}
	.item_right{
		width: calc(100% - 64rpx);
	}
	.row{
		width: 100%;
		@include flex(flec-start);
	}
	.avater{
		width: 200rpx;
		height: 200rpx;
		border-radius: 24rpx;
		margin-right: 24rpx;
	}
	.item_content{
		width: calc(100% - 224rpx);
		.name{
			font-size: 30rpx;
			color: #1B2120;
			text{
				display: inline-block;
				color: #6363FF;
				font-size: 24rpx;
				margin-right: 4rpx;
				padding: 4rpx 8rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
				border: 2rpx solid #6363FF;
			}
		}
		.specifications{
			color: #7C807F;
			width: fit-content;
			font-size: 26rpx;
			padding: 12rpx 16rpx;
			background: #F5F6F7;
			margin: 16rpx 0 32rpx;
			box-sizing: border-box;
			@include flex(center);
			border-radius: 26rpx;
		}
		.priceAndnum{
			.price{
				font-weight: bold;
				font-size: 30rpx;
				color: #FF6084;
			}
			@include flex(center,space-between);
		}
		.introType{
			@include flex(center,space-between);
		}
		.tips{
			font-size: 28rpx;
			color: #1B2120;
		}
	}
}
</style>